<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>案例_新闻列表</title>
    <!-- 导入样式表 -->
    <style>
      .news-item {
        display: flex;
        border: 1px solid #eee;
        width: 700px;
        padding: 10px;
        margin-bottom: 5px;
      }

      .thumb {
        display: block;
        width: 230px;
        height: 140px;
        background-color: #ccc;
        margin-right: 10px;
      }

      .right-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        flex: 1;
      }

      .title {
        font-size: 20px;
        font-weight: normal;
      }

      .tags span {
        display: block;
        float: left;
        background-color: #F0F0F0;
        line-height: 20px;
        padding: 0 10px;
        border-radius: 10px;
        margin-right: 8px;
      }

      .footer {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>

  <body>
    <!-- 新闻列表 -->
    <div id="news-list">
      <!-- 新闻的 item 项 -->
      
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script>
        axios({
            url: 'http://ajax-api.itheima.net/api/news',
            method: 'GET'
        }).then(res => {
            // console.log('从服务器取回的新闻数据是：', res.data.data)
            const arr = res.data.data
            console.log(arr[0])
            // 把数据填充到页面上
            // 数组中每一项都是个对象，要对应一个div
            let str = ''
            arr.forEach(ele => {
                // ele 对应的数据 ===> div 字符串
                
                // 拼接到str
                str += `<div class="news-item">
                    <img class="thumb" src="${ele.img}" alt="" />
                    <div class="right-box">
                    <!-- 新闻标题 -->
                    <h1 class="title">${ele.title}</h1>
                    <div class="footer">
                        <div>
                        <!-- 新闻来源 -->
                        <span>${ele.source}</span>&nbsp;&nbsp;
                        <!-- 发布日期 -->
                        <span>${ele.time}</span>
                        </div>
                        <!-- 评论数量 -->
                        <span>评论数：${ele.cmtcount}</span>
                    </div>
                    </div>
                </div>`
            })
            console.log(str)
            document.querySelector('#news-list').innerHTML = str
        })
    </script>
  </body>

</html>